<template>
  <div>
    <hsa-adaptive-container>
      <hsa-adaptive-pane>
        <hsa-title-pane>
          <hsa-title-pane-item title="查询条件">
            <t-query-condition
              :opts="opts"
              @submit="conditionEnter"
              @handleEvent="handleEvent"
              isExpansion
              isShowWidthSize
              :widthSize="4"
            />
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <hsa-adaptive-pane autoHeight>
        <hsa-title-pane>
          <hsa-title-pane-item title="查询结果">
            <div>
              <t-table
                :table="table"
                :columns="table.columns"
                @page-change="pageChange"
                @size-change="sizeChange"
                isPaginationCumulative
              />
            </div>
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>>
    </hsa-adaptive-container>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
// import hsaAdaptiveContainer from '@/components/hsa/adaptive/container.vue'
// import hsaAdaptivePane from '@/components/hsa/adaptive/pane.vue'
// import HasTitle from "@/components/hsa/title-box.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";

const edit = (val: any) => {
  console.log("edit", val);
};
const del = (val: any) => {
  console.log("nullify", val);
  ElMessageBox.confirm(`确认删除？`, "提示")
    .then(async () => {
      try {
        // await resources.delete({
        //   id: row.id
        // })
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
      } catch (err) {
        ElMessage({
          message: "删除失败",
          type: "error",
          showClose: false,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const table = ref<TableTypes.Table>({
  data: [
    {
      id: "1",
      date: "2019-09-25",
      date1: "2019-09-26",
      name: "张三",
      status: "2",
      address: "广东省广州市天河区",
    },
    {
      id: "2",
      date: "2019-09-26",
      date1: "2019-09-27",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "3",
      date: "2019-09-26",
      date1: "2019-09-28",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "4",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "5",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "6",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "7",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "8",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "9",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "10",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
    {
      id: "11",
      date: "2019-09-26",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
    },
  ],
  firstColumn: { type: "index", width: 80, fixed: true },
  total: 20,
  currentPage: 1,
  pageSize: 10,
  layout: "total,sizes, slot, prev, pager, next, jumper",
  prevText: "上一页",
  nextText: "下一页",
  // 接口返回数据
  //   data: [],
  // 表头数据
  columns: [
    { prop: "name", label: "取数任务名称", minWidth: "100" },
    { prop: "date", label: "任务描述", minWidth: "180" },
    { prop: "date", label: "取数类型", minWidth: "180" },
    { prop: "status", label: "创建时间", minWidth: "80" },
    { prop: "status", label: "状态", minWidth: "80" },
  ],
  // 表格内操作列
  operator: [
    {
      text: "编辑",
      fun: edit,
    },
    {
      text: "复制",
      fun: edit,
    },
    {
      text: "暂停",
      noshow: [{ key: "status", val: ["1"] }],
      fun: edit,
    },
    {
      text: "重启",
      noshow: [{ key: "status", val: ["2"] }],
      fun: edit,
    },
    {
      text: "删除",
      fun: del,
      bind: {
        type: "danger",
        text: true,
      },
    },
  ],
  // 操作列样式
  operatorConfig: {
    // fixed: "right", // 固定列表右边（left则固定在左边）
    width: 200,
    label: "操作",
  },
});
let state = reactive({
  queryData: {
    userName: undefined,
  },
});
const opts = computed(() => {
  return {
    userName: {
      label: "取数任务名称",
      comp: "el-input",
    },
  };
});
// 最终参数获取
const getQueryData = computed(() => {
  const { userName } = toRefs(state.queryData);
  return {
    userName: userName.value,
  };
});
onMounted(() => {
  getData();
});
const getData = async () => {
  let res;
  //   if (table.value.currentPage === 1) {
  //     res = await data
  //   } else {
  //     res = await data1
  //   }
  // console.log('获取列表数据', res)
  if (res?.success) {
    table.value.data = res.data.records;
    table.value.total = res.data.total;
  }
};
// 查询条件change事件
const handleEvent = (type, val) => {
  // console.log(111, type, val)
  switch (type) {
    case "date":
      console.log("获取event==date的数据", val);
      break;
  }
};
// 点击查询按钮
const conditionEnter = (data: any) => {
  console.log(1122, data);
  state.queryData = data;
  console.log("最终参数", getQueryData.value);
};
// 选择当前页码
const pageChange = (page) => {
  console.log("选择当前页码", page);
  table.value.currentPage = page;
  //   getData(val)
};
// 选择当页条数
const sizeChange = (size) => {
  console.log("选择当页条数", size);
  table.value.currentPage = 1;
  table.value.pageSize = size;
  //   getData(val)
};
</script>

<style lang="scss" scoped></style>
